<template>
    <div>
        <div class="video-container">
            <video width="1250" height="500" controls>
                <source src="http://rs.dance365.com/video/c06763bab0a9449588efd36edd557030_rs_ddcfa656b1f14c00a132a6e8fe77a1f2" type="video/mp4">
            </video>
        </div>
        <el-card :dataList="detailsList">
            <div class="detail-container space"  >
                <div class="detail_title">
                    <h4>梦华录【不惜时光】 原创古典舞</h4>
                    <div class="detail_title_right">加入会议室</div>
                </div>
                <div class="main_container">
                    <div class="detail_container_title">
                        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
                        <div>
                            <span>清影舞蹈_芳芳</span>
                            <span class="title_span2">Lv.9</span>

                        </div>
                        <el-button round class="publish">
                            <el-icon>
                                <Plus />
                            </el-icon>&nbsp;关注
                        </el-button>

                        <div class="time">发布时间： 06-29</div>
                    </div>
                    <div class="pre-container">
                        <h4 class="summary-container">愿不负时关不负卿</h4>
                    </div>
                    <p class="text2">原创作者：<span class="text3">芳芳</span></p>
                    <p class="text2">兴趣技能：<span class="text3">古典舞、中国舞</span></p>
                </div>
            </div>
        </el-card>
        <div class="require_more_services mt-10">
            <div class="ask_item active">
                <div class="ask_btn" @click="changeCount">求视频课</div>
            </div>

            <div class="ask_item active">
                <div class="ask_btn">求配套用品</div>
            </div>
            <div class="ask_item active">
                <div class="ask_btn">求线下课</div>
            </div>
        </div>
        <el-card class="more-container recommend_block_wrapper radius4-card mt-10" >
            <div class="panner_wrapper">
                <p class="title">TA的相关</p>
                <div class="card_list">图片列表</div>
            </div>
            <div class="panner_wrapper">
                <p class="title">更多推荐</p>
                <div class="card_list">图片列表</div>
            </div>

        </el-card>
        <div data-v-53e990c4="" class="more-container recommend_block_wrapper radius4" style="width: 1060px;"><!----></div>
        <el-card class="mt-10">

            <div class="more-container radius4" style="background: rgb(255, 255, 255); padding: 0px 20px; box-sizing: border-box;">
                <el-row>
                    <el-col :span="2">
                        <div><img style="width: 50px; height: 50px"
                                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></div>
                    </el-col>
                    <el-col :span="22">
                        <div>
                            <el-input :rows="2" type="textarea" placeholder="请登录后留言" />
                            <el-row>
                                <el-col :span="4" :offset="20">
                                    <el-button>取消</el-button>
                                    <el-button type="danger">保存</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col>
                        <div class="comment_list_container">
                            <div class="title">留言（）</div>
                        </div>
                        <hr style="margin-bottom: 20px" />
                        <div>
                            <img src="//rs.dance365.com/img/no_message@3x.2f295517.png" alt="无更多数据"
                                 style="display: block; margin: 0px auto; width: 200px;">
                            <p
                                    style="display: block; margin: 20px auto 40px; color: rgb(177, 181, 193); text-align: center;">
                                暂无留言</p>
                        </div>
                    </el-col>
                </el-row>
            </div>

        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import detailsApi from '@/api/rescources/DanceList';

const access_token = ref('c494ae44-3adc-48ca-8749-5128a53358d7')
const source = ref('recommend')
const pageSize = ref(20)
const pageNum = ref(0)
const localCache = ref(0)
const like = ref({
    name: '',
    id: '',
    label: ''
})
const creator = ref({
    level: '',
    name:'',
    avatar: '',
    id: '',
})
const tag = ref({
    groupType: '',
    name: '',
    id: ''
})
const moment = ref({
    originAuthor: '',
    workTitle: ''
})
const content = ref({
    title: "",
    avocationTags: like,
    momentClassificationBackup: moment,
    tags: tag,
    creatorBackup: creator
})

const detailsList = ref()
const getDetailsList = async () => {
    let result = await detailsApi.getDanceList('c494ae44-3adc-48ca-8749-5128a53358d7', pageSize.value, pageNum.value, localCache.value)
    detailsList.value = result
    console.log('1111222', detailsList)
}
const changeCount = () => {

}
onMounted(() => {
    getDetailsList()
})

</script>

<style scoped>
.video-container {
    width: 1200px !important;
    padding: 20px;
    background-color: black;
}
.detail_title {
    height: 42px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 19px;
    font-size: 20px;

}

.detail_title h4 {
    margin: 0;
    line-height: 42px;
}

.detail_title_right {
    width: 106px;
    height: 40px;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
    color: #f93684;
    border: 1px solid #f93684;
    cursor: pointer;
}


.main_container .detail_container_title {
    height: 30px;
    position: relative;
}

.main_container .detail_container_title img {
    position: relative;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-right: 9px;
    background-size: cover;
    background-position: 50%;
}

.main_container .detail_container_title div {
    display: inline-block;
    line-height: 1.3;
    font-size: 20px;
    color: #111;
}

.main_container .detail_container_title div span {
    line-height: 26px;
    display: inline-block;
}

.title_span2 {
    width: 41px;
    height: 20px;
    background-color: #ff43d0;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    line-height: 20px !important;
    position: absolute;
    left: 180px;
    top: 10px;
}


.main_container .detail_container_title .publish {
    background-color: #f93684;
    color: white;
    margin: 0 28px 0 80px;
    top: -5px;
}

.time {
    position: absolute;
    right: 0;
    top: 3px;
}

.pre-container .summary-container {
    border-bottom: 1px solid #e3e3e3;
}

.summary-container {
    margin: 16px 0;
    font-size: 20px;
    line-height: 24px;
    color: #111;
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 20px;
    font-weight: 600;
}

.text2 {
    margin-top: 5px;
    line-height: 24px;
}

.text3 {
    cursor: pointer;
    color: #f93684;
}

.detail-container space {
    padding: 20px 30px 30px 30px;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.require_more_services {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    height: 70px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 20px;
    max-width: 1219px;
    margin-left: auto;
    margin-right: auto;
}
.require_more_services .ask_item :active{
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.ask_item .ask_btn {
    position: relative;
    font-size: 14px;
    padding: 0 21px;
    height: 36px;
    line-height: 36px;
    margin-right: 32px;
    background: #ffeaf2;
    border-radius: 57px;
    font-weight: 400;
    color: #111;
    cursor: pointer;
}
.detail-video-container .more-container {
    width: 1220px;
    margin: 20px auto 0;
    padding-top: 20px !important;
}
.panner_wrapper {
    background-color: transparent;
    padding-top: 23px;
    padding-bottom: 30px;
    border-radius: 4px;
    width: 1020px;
    margin: 0 auto;
}
.panner_wrapper .title{
    padding-bottom: 23px;
    color: #111;
    font-size: 24px;
}
.panner_wrapper .card_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.more-container {
    width: 1220px;
    margin: 20px auto 0;
}
.radius4 {
    border-radius: 4px;
    overflow: hidden;
}
.comment_list_container{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.comment_list_container .title{
    font-size: 24px;
    color: #111;
    line-height: 40px;
    border-bottom: 1px solid #eaecf0;
    padding-bottom: 15px;
}
</style>
